import React, {Component} from "react";
import {Card, Col, Row, DatePicker} from "antd";
import {
    CarryOutOutlined,
    ProfileOutlined,
    FileProtectOutlined,
    FileSyncOutlined,
    UserOutlined,
    BlockOutlined
} from '@ant-design/icons';
import ReactEcharts from "echarts-for-react";
import echarts from "echarts";
import "echarts/lib/chart/line";
import "./index.less";
import {postGoodOrderRank, postOrderDateStatistic, orderDashboard} from "@/api/api";
const {RangePicker} = DatePicker;
const dataIcon=[
    <CarryOutOutlined/>,
    <ProfileOutlined/>,
    <FileProtectOutlined/>,
    <FileSyncOutlined/>,
    <BlockOutlined />,
    <UserOutlined/>,
]
class dataCount extends Component {
    constructor(props) {
        super(props);
        this.state = {
            getDataArr: [],
            initializationSelectVal: "",
            countLoading: false,
            chartsLoading: false,
            orderDateParams: {},
            orderStatisticData: {},//订单
            goodDateParams: {},
            goodStatisticData: {},//商品订购
            areaDateParams: {},
            areaStatisticData: {},
            dataCount: [
                {title: '订单总数', value: 1, icon:'CarryOutOutlined', pageName: 'order', status: ''},
                {title: '未完成订单', value: 1, icon: 'ProfileOutlined', pageName: 'order', status: ''},
                {title: '已完成订单', value: 1, icon: 'CarryOutOutlined', pageName: 'order', status: '3'},
                {title: '已上架商品', value: 1, icon: 'FileProtectOutlined', pageName: 'goodManage', status: '2'},
                {title: '未上架商品', value: 1, icon: 'FileSyncOutlined', pageName: 'goodManage', status: '3'},
                {title: '用户总数', value: 1, icon: 'UserOutlined', pageName: 'endUserManage', status: ''},
            ],
        };
    }

    handleChange = (value) => {
        this.setState({
            initializationSelectVal: value,
        });
    };
    componentDidMount() {
        this.initGoodEcharts()
        this.initOrderEcharts()
        this.initOrderNum()
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return
        }
    }

    initOrderNum() {
        let userInfo = localStorage.getItem('userInfo') && JSON.parse(localStorage.getItem('userInfo'))
        if (userInfo.userId) {
            orderDashboard({userId: userInfo.userId}).then((res) => {
                if (res.code == 0) {
                    this.countLoading = true
                    this.state.dataCount.map(item => {
                        switch (item.title) {
                            case '订单总数':
                                item.value = parseInt(res.data.cancelTotal) + parseInt(res.data.deliveryTotal) + parseInt(res.data.errorTotal) + parseInt(res.data.ofDeliveryTotal) + parseInt(res.data.unDeliveryTotal);
                                break;
                            case '用户总数':
                                item.value = res.data.userTotal;
                                break;
                            case '已上架商品':
                                item.value = res.data.shelveGood
                                break;
                            case '未上架商品':
                                item.value = res.data.shelveGood
                                break;
                            case "未完成订单":
                                item.value = parseInt(res.data.cancelTotal) + parseInt(res.data.errorTotal) + parseInt(res.data.ofDeliveryTotal) + parseInt(res.data.unDeliveryTotal);
                                break
                            case "已完成订单":
                                item.value = res.data.deliveryTotal
                                break
                            default:
                                break;
                        }
                    })

                }
            })
        }

    }

    initGoodEcharts() {
        postGoodOrderRank(this.state.goodDateParams).then((res) => {
            if (res.msg === 'true') {
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: 30,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.name,
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            // interval: 2,//设置为 1，表示『隔一个标签显示一个标签』
                            //	margin:15,
                            textStyle: {
                                color: '#1B253A',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },
                        },
                        axisTick: {//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine: {//坐标轴轴线相关设置
                            lineStyle: {
                                color: '#E5E9ED',
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: true,
                            lineStyle: {
                                color: '#E5E9ED',
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#a8aab0',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#E5E9ED',
                                }
                            }

                        }
                    ],
                    series: [{
                        type: 'bar',
                        data: res.data.count,
                        barWidth: '20px',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#1890ff' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#d9e5f1' // 100% 处的颜色
                                }], false)
                            }
                        },
                    }]
                };
                this.setState({
                    goodStatisticData: option
                })
            }
        })
    }

    initOrderEcharts() {
        postOrderDateStatistic(this.orderDateParams).then((res) => {
            if (res.msg === 'true') {
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '已完成'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: 30,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,//坐标轴两边留白
                        data: res.data.time,
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            // interval: 2,//设置为 1，表示『隔一个标签显示一个标签』
                            //	margin:15,
                            textStyle: {
                                color: '#1B253A',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },
                        },
                        axisTick: {//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine: {//坐标轴轴线相关设置
                            lineStyle: {
                                color: '#E5E9ED',
                                // opacity:0.2
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: true,
                            lineStyle: {
                                color: '#E5E9ED',
                                // 	opacity:0.1
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#a8aab0',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#E5E9ED',
                                    // 	opacity:0.1
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            name: '总数',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#3A84FF',
                                    lineStyle: {
                                        color: "#3A84FF",
                                        width: 1
                                    },
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: 'rgba(58,132,255,0)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(58,132,255,0.35)'
                                        }]),
                                    }
                                }
                            },
                            data: res.data.orderCount
                        },
                        {
                            name: '已完成',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: 'rgba(255,80,124,1)',
                                    lineStyle: {
                                        color: "rgba(255,80,124,1)",
                                        width: 1
                                    },
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: 'rgba(255,80,124,0)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(255,80,124,0.35)'
                                        }]),
                                    }
                                }
                            },
                            data: res.data.orderComplet
                        }
                    ]
                };
                this.setState({
                    orderStatisticData: option
                })
            }
        })
    }

    onChangeTime = (value, data2) => {
        this.state.goodDateParams['startTime'] = data2[0]
        this.state.goodDateParams['endTime'] = data2[1]
        this.initGoodEcharts()
    }

    render() {
        const renderCard = this.state.dataCount.map((item, index) => <Col style={{marginBottom:'10px'}} key={index}
                                                                          sm={{span: 12}}
                                                                          md={{span: 8 }}
                                                                          lg={{span: 8 }}
                                                                          xl={{span: 4}}
                                                                          xxl={{span: 4}}>
            <Card loading={this.state.countLoading}>
                <div className="data-card-item clearfix">
                    <div className="col-icon bg-info">
                        { dataIcon[index]}
                    </div>
                    <div className="col-content">
                        <span className="card-title">{item.title}</span>
                        <span className="card-value">{item.value}</span>
                    </div>
                </div>
            </Card>
        </Col>)
        return (
            <div className="site-card-wrapper ">
                <div>
                    <Row gutter={16}>
                        {renderCard}
                    </Row>
                </div>
                <div className="threeContent padingTop50">
                    <Row gutter={16}>
                        <Col span={12}>
                            <Card>
                                <Row>
                                    <label>产品订购排行</label>
                                    <RangePicker style={{marginLeft: '10px'}} placeholder={["开始时间", "结束时间"]}
                                                 onChange={this.onChangeTime}/>
                                </Row>
                                <Row>
                                    <ReactEcharts
                                        option={this.state.goodStatisticData}
                                        notMerge={true}
                                        lazyUpdate={true}
                                        style={{width: "100%", height: "400px"}}
                                    />
                                </Row>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Row>
                                    <label>订单变化趋势</label>
                                    <RangePicker style={{marginLeft: '10px'}} placeholder={["开始时间", "结束时间"]}
                                                 onChange={this.onChangeTime}/>
                                </Row>
                                <Row>
                                    <ReactEcharts
                                        option={this.state.orderStatisticData}
                                        notMerge={true}
                                        lazyUpdate={true}
                                        style={{width: "100%", height: "400px"}}
                                    />
                                </Row>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}

export default dataCount;
